<template>
    <div id="main" ref="main">

    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props:[
        'data', 
        'centerTitle',
    ],
    data(){
        return {
            option: null,
        }
    },
    methods:{
        initChart(){
            var chartDom = this.$refs.main
            console.log(chartDom)
            var myChart = echarts.init(chartDom);

            this.option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            title: {
                text: this.centerTitle,
                // 副标题
                // subtext: "50%",
                // 主副标题间距
                itemGap: 40,
                x: 'center',
                y: 'center',
                // top: '280',
                // // 主标题样式
                textStyle: {
                    fontSize: '20',
                    color: 'black'
                },
                // // 副标题样式
                subtextStyle: {
                    fontSize: '20',
                    fontWeight: '800',
                    color: 'black'
                }
            },
            series: [
                {
                name: '',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{c}',
                },
                
                emphasis: {
                    label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: this.data
                // data: [
                //     { value: 1048, name: 'Search Engine' },
                //     { value: 735, name: 'Direct' },
                //     { value: 580, name: 'Email' },
                //     { value: 484, name: 'Union Ads' },
                //     { value: 300, name: 'Video Ads' }
                // ]
                }
            ]
            };
            myChart.setOption(this.option);
        }
    },
    mounted(){
        // var chartDom = document.getElementById('main');
        this.initChart()
    },
    watch:{
        data(){
            this.initChart()
        }
    }
}
</script>

<style lang="less" scoped>
#main{
    width: 100%;
    height: 100%;
}
</style>